<route lang="json5" type="page">
{
  style: {
     navigationStyle: 'custom',
    navigationBarTitleText: '',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view class="login_content">
    <view class="bg_left" @click="goLeftPage"><uv-icon name="arrow-left" color="#000" size="28"></uv-icon></view>
    <view class="login_content_box">
      <view class="login_content_box_title">{{ type === 'dl' ? '手机号快捷登录' : '手机号绑定' }}</view>
      <view class="login_content_box_subTit">未注册用户登录即默认注册</view>
      <view class="input_box">
        <view class="input_box_title">+86</view>
        <view class="input_box_line"></view>
        <uv-input placeholder="请输入手机号码" border="none" v-model="form.phone" :customStyle="customStyle"
          maxlength="11"></uv-input>
      </view>
      <view class="input_box" v-if="type === 'dl'">
        <view class="input_box_title">验证码</view>
        <view class="input_box_line"></view>
        <uv-input placeholder="请输入短信验证码" border="none" v-model="form.captcha" :customStyle="customStyle" maxlength="4">
          <template v-slot:suffix>
            <uv-code ref="uCode" @change="codeChange" seconds="60" changeText="XS"></uv-code>
            <view @click="getCode" class="login_code">{{ tips }}</view>
          </template>
        </uv-input>
      </view>
      <view class="input_box" v-else>
        <view class="input_box_title">验证码</view>
        <view class="input_box_line"></view>
        <uv-input placeholder="请输入短信验证码" border="none" v-model="form.captcha" :customStyle="customStyle" maxlength="4">
          <template v-slot:suffix>
            <uv-code ref="uCode" @change="codeChange" seconds="60" changeText="XS"></uv-code>
            <view @click="getCode" class="login_code">{{ tips }}</view>
          </template>
        </uv-input>
      </view>
      <view class="login_content_to_agreement" v-if="type === 'dl'">
        <uv-checkbox-group v-model="agreementValue">
          <uv-checkbox activeColor="#FF7D1C" name="agreement" shape="circle"></uv-checkbox>
        </uv-checkbox-group>
        <view class="login_content_to_agreement_text">
          我已阅读并同意慧赚生活<text class="login_content_to_agreement_text_color" @click="toAgreement('yh')">《用户协议》</text>和<text
            class="login_content_to_agreement_text_color" @click="toAgreement('ys')">《隐私政策》</text>
        </view>
      </view>
      <view class="login_content_button" v-if="type === 'dl'">
        <uv-button color="#fff" :text="buttonText" :customStyle="buttonCustomStyle"
          :disabled="form.phone == '' || form.captcha == '' || !agreementValue.length" @click="getCodLogin"></uv-button>
      </view>
      <view class="passwordLogin" @click="passWordClick">{{ passWordTxt }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getCaptchaCodeApi, getUserInfoApi, loginYzmApi } from '@/service/app/user'; // 看这里
import { onMounted, reactive, ref } from 'vue';

import { useAccessStore } from '@/store/access';
import { useUserStore } from '@/store/user';
const accessStore = useAccessStore()
const userStore = useUserStore()

// 响应式数据
const form = reactive({
  phone: '',
  captcha: '',
  device_type: 3,
  equipment_id: '',
  rand_code: ''
})

const customStyle = reactive({
  width: '100%',
  padding: '0',
})

const buttonCustomStyle = reactive({
  width: '100%',
  height: '92rpx',
  fontFamily: 'PingFang SC, PingFang SC',
  fontSize: '32rpx',
  fontWeight: 500,
  background: '#FF7D1C',
  borderRadius: '200rpx'
})

const agreementValue = ref<string[]>([])

const type = ref('dl')
const tips = ref('')
const buttonText = ref('下一步')
const uCode = ref(null)
const passWordTxt = ref('密码登录')

const codeChange = (text: string) => {
  tips.value = text
}
const getCode = async () => {
  try {
    if (uCode.value?.canGetCode) {
      uni.showLoading({ title: '正在获取验证码' })
      await getCaptchaCodeApi({ phone: form.phone })
      uni.hideLoading()
      uni.showToast({ title: '验证码已发送', icon: 'none' })
      uCode.value.start()
    } else {
      uni.showToast({ title: '倒计时结束后再发送', icon: 'none' })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({ title: '获取验证码失败', icon: 'none' })
  }
}
const getCodLogin = async () => {
  if (!mobile(form.phone)) {
    uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
    return
  }
  if (!form.captcha) {
    uni.showToast({ title: '请输入验证码', icon: 'none' })
    return
  }
  loginYzmApi({
    data: {
      captcha: form.captcha,
      phone: form.phone,
      invited_by_code: '',
      device_type: form.device_type,
      equipment_id: form.equipment_id,
      rand_code: form.rand_code
    }
  }).then(res => {
    accessStore.setAccessToken(res.data.token);
    getMyInfo();
  })

}
function getMyInfo() {
  getUserInfoApi({
    data: {
      current: 1,
      page_size: 10
    }
  }).then(res => {
    userStore.setUserInfo(res.data);
    if (res.data.invited_by_code === '' && res.data.agency_level == 1) {
      uni.navigateTo({
        url: '/pages-sub/login/addInviter'
      })
    } else {
      uni.switchTab({
        url: '/pages/home/index'
      })
    }
  })
}
function mobile(phone) {
  // 最新号段正则（覆盖所有运营商号段）
  const mobileReg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;

  // 处理输入：转为字符串并移除空格/特殊字符
  const cleanPhone = String(phone).replace(/[\s-()+]/g, '');

  // 基础格式验证
  if (!mobileReg.test(cleanPhone)) return false;

  // 虚拟号段过滤（可选）
  const virtualPrefix = ['170', '171', '162', '167', '168'];
  if (virtualPrefix.some(prefix => cleanPhone.startsWith(prefix))) {
    return false; // 根据业务需求决定是否允许虚拟号段
  }

  return true;
}
// 生命周期
onMounted(() => {
  uni.getPushClientId({
    success: (res) => form.equipment_id = res.cid
  })
})
function goLeftPage() {
  // uni.navigateBack(); // 返回上一步
  uni.switchTab({
    url: '/pages/home/index'
  })
}
// 协议
const toAgreement = (v) => {
  uni.navigateTo({
    url: '/pages-sub/agreement/index?type=' + v
  })
}
// 密码登录
function passWordClick() {
  uni.navigateTo({
    url: '/pages-sub/login/passwordLogin'
  })
}
</script>

<style lang="scss" scoped>
.login_content {
  width: 100%;
  margin-top: 232rpx;
  position: relative;

  .login_content_box {
    width: 100%;
    box-sizing: border-box;
    padding: 62rpx 32rpx 0 32rpx;
    background: #FFFFFF;

    .login_content_box_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 48rpx;
      color: #121212;
      font-style: normal;
      text-transform: none;
    }

    .login_content_box_hint {
      padding-top: 16rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #999999;
      font-style: normal;
      text-transform: none;
    }

    .login_content_box_subTit {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      margin-top: 16rpx;
      font-size: 32rpx;
      color: #999999;
      font-style: normal;
      text-transform: none;
    }

    .input_box {
      box-sizing: border-box;
      padding: 48rpx 0 32rpx 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 124rpx;
      border-bottom: 2rpx solid #DFDFDF;

      .input_box_title {
        flex: 0 0 122rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #121212;
        font-style: normal;
        text-transform: none;
      }

      .input_box_line {
        width: 2rpx;
        height: 24rpx;
        background: #DFDFDF;
        margin-right: 24rpx;
      }
    }

    .login_content_button {
      box-sizing: border-box;
      padding: 0 72rpx;

      .login_content_to_password {
        width: 100%;
        padding-top: 48rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .login_content_to_agreement {
      display: flex;
      align-items: center;
      padding-top: 48rpx;
      padding-bottom: 128rpx;

      ::v-deep .uv-checkbox-group {
        flex: none !important;
      }

      .login_content_to_agreement_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        font-style: normal;
        text-transform: none;
      }

      .login_content_to_agreement_text_color {
        color: #FF7D1C;
      }
    }
  }

  .passwordLogin {
    text-align: center;
    font-size: 23rpx;
    margin-top: 30rpx;
  }
}

.login_code {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
  color: #FF7D1C;
  font-style: normal;
  text-transform: none;
}
</style>
